/*jForm表单        css框架*/

/*
            使用这个表单框架需要先与设计师沟通对以下一些样式进行设置：
            一行的宽高
            每一行的间距
            字体常用大小
            标题的样式
            内容的样式
            三种输入框的样式
            几种提示信息的样式
            使用方法：请查看帮助文档
         */
/*------------------------------------------------表单------------------------------------------------*/
/*--------------表单框架初始化标签样式--------------*/
input,textarea{
	display: inline-block;
}

label input{
	vertical-align: middle;
}

/*表单容器*/
.jFormContainer{
	/*display:block;*/
}
.jFormContainer label{
	display: inline-block;
}
/*--------------所有行样式--------------*/
.jForm-row{
	margin-bottom: 10px;	/*每一行的下边距（每一行的距离）*/
	padding-bottom: 15px;	/*每一行的下内边距（内容与边框的距离）*/
	border-bottom:1px solid #CCC;/*每一行的边框样式*/
	width:100%;
}
/*清除浮动*/
.jForm-row:after{
	content: '';
	display: block;
	clear: both;
}
/*--------------行（默认一行一列）--------------*/
.jForm-row{

}
.jForm-tit{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float:left;
	width:12.5%;/*每一行标题的宽度*/
	*width:11.5%;/*每一行标题的宽度*/
}
.jForm-con{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float:left;
	width: 87.5%;/*一行一列内容宽度*/
	*width:86.5%;
}
/*--------------行(一行二列)--------------*/
.jForm-row.row-col2{

}
.row-col2 .jForm-con{
	width:37.5%;/*一行两列内容的宽度*/
	*width:36.5%;/*一行两列内容的宽度*/
}
/*--------------行（一行三列）--------------*/
.jForm-row.row-col3{

}
.row-col3 .jForm-tit{
	width:8.325%;/*一行三列标题的宽度*/
	*width:7.325%;/*一行三列标题的宽度*/
}
.row-col3 .jForm-con{
	width:24.975%;/*一行三列内容的宽度*/
	*width:23.975%;/*一行三列内容的宽度*/
}
/*--------------行（通栏）--------------*/
.jForm-row.row-full{

}
.row-full .jForm-tit{
	margin-bottom: 10px;/*通栏内容与标题的距离*/
}
.row-full .jForm-con{
	width: 100%;
}
/*--------------输入框--------------*/
/*短输入框*/
.jForm-sInput{
	width: 6em;/*短输入框的宽度*/
}
/*中输入框*/
.jForm-mInput{
	width: 20em;/*中输入框的宽度*/
}
/*长输入框*/
.jForm-lInput{
	width: 70%;/*长输入框的宽度*/
}
/*通栏输入框*/
.jForm-fInput{
	width: 100%;
}

/*数字输入框*/
.jForm-numInput{
	display: inline-block;
	width: 3em;
}
/*--------------提示文字样式--------------*/
/*说明*/
.jForm-note{
	clear: both;
	color:#999999;/*说明文字的颜色*/
}
/*提示*/
.jForm-tips{
	clear: both;
	color:red;/*提示文字的颜色*/
}
/*错误*/
.jForm-error{
	clear: both;
	padding:0.5% 1%;
	border:1px solid #FFDD99;/*错误文字的边框*/
	background-color:#FFE8E6;/*错误文字的背景色*/
	color: #333;/*错误文字的字体颜色*/
}
span.jForm-note,
span.jForm-tips,
span.jForm-error{
	display: inline-block;
}
/*--------------必填符号--------------*/
em.jForm-tit:after,
.jForm-tit em:before{
	content: "*";
	color: red;/*必填符号的颜色*/
}
.jForm-row em{
	font-style: normal;
}
/*--------------额外功能--------------*/
/*带边框的表单*/
.jForm-borderStyle{
	border-color: #ccc;/*带边框表单的边框颜色*/
	border-style: solid;/*带边框表单的边框样式*/
	border-width: 1px;/*带边框表单的边框宽度*/
}
.jForm-borderStyle .jForm-row {
	margin: 0;
	padding: 0;
	border-color: inherit;
	border-style: inherit;
	border-width: 1px 0 0 0;/*带边框表单的内边框宽度*/
	overflow: hidden;
}
.jForm-borderStyle .jForm-row:first-child{
	border-top: none;
}
.jForm-borderStyle .jForm-tit,
.jForm-borderStyle .jForm-con{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-color: inherit;
	border-style: inherit;
	border-width: 0 0 0 1px;/*带边框表单的内边框宽度*/
	padding-bottom: 999em;
	margin-bottom: -999em;
}
.jForm-borderStyle .jForm-row .jForm-tit:first-child{
	border-left: none;
}
/*有标题的带边框表单fieldset*/
.jForm-borderStyle fieldset{
	border-color:inherit;
	border-style:inherit;
	border-width:0;
	margin: 0;
	padding: 0;
}
/*缩略图*/
.jForm-upImg{
	display: inline-block;
	width:2.5em;/*缩略图初始宽度*/
}
.jForm-upImg img{
	max-width:2.5em;/*缩略图最大宽度*/
	max-height:20px;/*缩略图图片的高度*/
}
.jForm-upImg:hover img{
	position:absolute;
	min-width:160px;/*缩略图大图 最小宽度*/
	min-height:160px;/*缩略图大图 最小高度*/
	max-width:300px;/*缩略图大图 最大宽度*/
	max-height:200px;/*缩略图大图 最大高度*/
	margin-left:-80px;/*缩略图大图 位置*/
	margin-top:-80px;/*缩略图大图 位置*/
	z-index:9;
}

/*--------------媒体查询自适应--------------*/
@media (max-width:767px){
	/*表单*/
	.jForm-row .jForm-tit{
		clear: both;
		width: 20%;
		*width: 19%;
	}
	.jForm-row .jForm-con{
		width: 80%;
		*width: 79%;
	}
	/*带边框表单*/


	/*网格化*/
	.JRow-grid.mobileStyle [class^=JSpan] {
		margin-left:0;
		width:100%;
	}
}
/*------------------------------------------------网格化------------------------------------------------*/
.JRow-grid {
	width: 100%;
	margin:1% auto 0 auto;
	clear:both;
	height:100%;
	overflow: hidden;
	font-size:0.875em;
	padding:0.3% 0;
}

.JRow-grid:first-child {
	margin-top: 0;
}

.JRow-grid [class^=JSpan] {
	margin-left:2.7624309392265194%;
	float:left;
	text-indent: 0.5em;
}
.JRow-grid [class^=JSpan],.JRow-grid [class^=JSpan] .tit,.JRow-grid [class^=JSpan] .con{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.JRow-grid [class^=JSpan]:first-child {
	margin-left: 0;
}

.JRow-grid .JSpan12 {
	width: 100%;
	*width: 99.94680851063829%;
}
.JRow-grid .JSpan11 {
	width: 91.43646408839778%;
	*width: 91.38327259903608%;
}
.JRow-grid .JSpan10 {
	width: 82.87292817679558%;
	*width: 82.81973668743387%;
}
.JRow-grid .JSpan9 {
	width: 74.30939226519337%;
	*width: 74.25620077583166%;
}
.JRow-grid .JSpan8 {
	width: 65.74585635359117%;
	*width: 65.69266486422946%;
}
.JRow-grid .JSpan7 {
	width: 57.18232044198895%;
	*width: 57.12912895262725%;
}
.JRow-grid .JSpan6 {
	width: 48.61878453038674%;
	*width: 48.56559304102504%;
}
.JRow-grid .JSpan5 {
	width: 40.05524861878453%;
	*width: 40.00205712942283%;
}
.JRow-grid .JSpan4 {
	width: 31.491712707182323%;
	*width: 31.43852121782062%;
}
.JRow-grid .JSpan3 {
	width: 22.92817679558011%;
	*width: 22.87498530621841%;
}
.JRow-grid .JSpan2 {
	width: 14.3646408839779%;
	*width: 14.311449394616199%;
}
.JRow-grid .JSpan1 {
	width: 5.801104972375691%;
	*width: 5.747913483013988%;
}

.JRow-grid .tit,
.formContainer .row [class^=JSpan] .tit{
	width:30%;
	float:left;
	padding:1% 0;
	display: block;
}
.JRow-grid .con,
.formContainer .row [class^=JSpan] .con{
	width:70%;
	*width:69.888888%;
	text-indent: 0;
	float:left;
	padding:1% 0;
}




